<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />

<title>添加模版</title>
</head>
<body>
<div class="pd-20">
	<form action="<%=path%>/backstage/template-add" method="post" class="form form-horizontal" id="form-u_template-add">
		<input type="hidden" id="id" name="id" value='${u_template.template_id}' />
		<input type="hidden" id="template_id" name="template_id" value='${u_template.template_id}' />     
		<input type="hidden" id="web_path" name="web_path" value="<%=path%>"/>    	
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">模版名称：</label>
            <div class="form-label col-xs-4 col-sm-3">
                <input type="text" class="input-text" value="${u_template.tpl_name}" placeholder="" id="" name="tpl_name"  nullmsg="不能为空">
        	</div>
		</div>
				
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">示意图：</label>
			<div class="formControls col-xs-8 col-sm-5">
			    	<div id="filePicker_pre_picture">选择图片</div>
				<div id="fileList_pre_picture" class="uploader-list"></div>
			
				<input type="hidden" class="input-text"
				value="${u_template.tpl_thumb}" placeholder=""
				id="tpl_thumb" name="tpl_thumb">
			</div>
		</div>
		
		  <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">预览</label>
            <%-- <div class="form-label col-xs-4 col-sm-3">
            <!-- 后续优化，src为空时不显示框框-->
	           <img src="${u_template.tpl_thumb}"  id="pre_img"  style="width:300px; height:300px" />           
        	</div> --%>
		</div>
	
		 <div class="row cl">
        	<label class="form-label col-xs-4 col-sm-3"></label>
			<img src="${u_template.tpl_thumb}"  id="pre_img"  style="width:300px; height:300px" />	
		</div>
		
		
		
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">适用模块：</label>
            <div class="form-label col-xs-4 col-sm-3">           
	          	<c:forEach items="${template_module}" var="module">														
					<input type="checkbox" value="${module.item_value}" name="typetags" 
					<c:if test="${fn:contains(u_template.type,module.item_value)}"> checked="true"</c:if>/>
					[${module.display_name}]				
				</c:forEach>	
        	</div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">广告投入额：</label>
            <div class="form-label col-xs-4 col-sm-3">
               <span class="select-box"> 
				<select name="tpl_level" 
					class="select">
					<c:forEach items="${template_price}" var="price">
						<option value="${price.item_value}" 
							<c:if test="${u_template.tpl_level==price.item_value}">selected</c:if>>${price.display_name}
						</option>					
					</c:forEach>
				</select>
				</span>
        	</div>
		</div>
						
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">文字说明：</label>
            <div class="form-label col-xs-4 col-sm-3">
                <input type="text" class="input-text" value="${u_template.tpl_desc}" placeholder="" id="" name="tpl_desc" datatype="*" nullmsg="不能为空">
        	</div>
		</div>
			
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">背景图片：</label>
            <div class="form-label col-xs-4 col-sm-3">
              	<span class="select-box">
				<select name="bg_image" id="bg_image" onchange='change_bgimage()' class="select">
					<option value="-1">--无--</option>							
					<c:forEach items="${template_img_list}" var="template_list">					
						<option value="${template_list.RESOURCE_ID}" <c:if test="${u_template.bg_image == template_list.RESOURCE_ID}">selected</c:if>>
							${template_list.RES_NAME}
						</option>
					</c:forEach>
				</select>
				</span>
        	</div>
		</div>
		
		 <div class="row cl">
        	<label class="form-label col-xs-4 col-sm-3"></label>        	
        	<c:forEach items="${template_img_list}" var="template_list">					
              	<input type="hidden" id="template_img_list" name="template_img_list" value="${template_list.RESOURCE_ID}" />
				<c:if test="${u_template.bg_image == template_list.RESOURCE_ID}">
					<img src="${template_list.RES_IMAGE}"  id="bg_img"  style="width:100px; height:100px" />
				</c:if>	
			</c:forEach>
			<c:if test="${u_template.bg_image == null }">
	  <!--  <div id="show" style="display :none;">  -->			
				<img src=""  id="bg_img"  style="width:100px; height:100px" />
	  <!--  </div> -->	
			</c:if>	
		</div>
						
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">背景音乐：</label>
            <div class="form-label col-xs-4 col-sm-3">       
				<span class="select-box"> 
				<select name="bg_audio" id="bg_audio" onchange='change_bgaudio()'  class="select">
					<option value="-1">--无--</option>							
					<c:forEach items="${template_audio_list}" var="template_list">					
						<option value="${template_list.RESOURCE_ID}" <c:if test="${u_template.bg_audio == template_list.RESOURCE_ID}">selected</c:if>>						
							${template_list.RES_NAME}
						</option>
					</c:forEach>
				</select>
				</span> 
        	</div>
		</div>
				
	 <div class="row cl">
        	<label class="form-label col-xs-4 col-sm-3"></label>        	
        	<c:forEach items="${template_audio_list}" var="template_list">					
              	<input type="hidden" id="template_audio_list" name="template_audio_list" value="${template_list.RESOURCE_ID}" />
				<c:if test="${u_template.bg_audio == template_list.RESOURCE_ID}">				
					<audio controls="controls">
						<source src="${template_list.RES_IMAGE}" type="audio/mpeg" id="bg_audio_info">
					</audio>
				</c:if>	
			</c:forEach>
			<c:if test="${u_template.bg_audio == null }">
		<!-- 	<div id="show" style="display :none;">  -->			
				<audio controls="controls" id="bg_audio_info">
						<source src="" type="audio/mpeg" >
					</audio>
			<!-- </div> -->	
			</c:if>	
		</div> 
		 
  
		<div class="row cl">
			<div class="col-10 col-offset-2">
				<button onClick="u_template_save_submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
			</div>
		</div>	
	</form>
</div>

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script> 
<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script> 
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/u_template.js"></script> 

<script type="text/javascript">

	function u_template_save_submit(){
		$("#form-u_template-add").Validform({
			tiptype:2,
			ajaxPost:true,
			callback:function(form){
				var index = parent.layer.getFrameIndex(window.name);
				if (index){//关闭弹出层
					parent.$('.btn-refresh').click(); 
					parent.layer.close(index);
				}else{//单独的页面
					location.href = "<%=path%>/backstage/template-list"; 
				}
			}
		});
	}

		
	function change_bgimage(){
		var values = $('#bg_image option:selected').val(); // 选中值
		values = "RESOURCE_ID"+values+"=";
		var obj = '${resultImgInfo}';
		obj = obj.replace("]", "").replace("[", "");
		var result = "";
		var array = new Array();
		array = obj.split(",");
		var leng = array.length;
		for (var i=0; i < leng; i++) {		
			if(array[i].indexOf(values) > 0){
				result = array[i];
			}
		}
		result = result.replace(values,"");	
		$('#bg_img').attr("src",result);
	}
     
	function change_bgaudio(){
		var values = $('#bg_audio option:selected').val(); 
		values = "RESOURCE_ID"+values+"=";
		var obj = '${resultAudioInfo}';
		obj = obj.replace("]", "").replace("[", "");
		var result = "";
		var array = new Array();
		array = obj.split(",");
		var leng = array.length;
		for (var i=0; i < leng; i++) {		
			if(array[i].indexOf(values) > 0){
				result = array[i];
			}
		}
		result = result.replace(values,"");	
		$('#bg_audio_info').attr("src",result);
	}
	
</script>
</body>
</html>

